<template>
    <div>
       <mu-form auto-validate ref="form"
               :model="insideValue"
               :label-position="form.labelPosition"
               :label-width="form.labelWidth"
       >
           <mu-row gutter>
               <mu-col :span="item.span" :offset="item.offset"
                       v-for="item in items"
                       :key="item.key" v-show="item.show !== false">
                   <mu-form-item
                           :label="item.label"
                           :help-text="item.tips"
                           :error-text="item.err"
                           :prop="item.key"
                           :rules="item.rules"
                           :label-float="item.labelFloat"
                   >
                       <slot :name="item.key">
                           <component :is="item.type" :config="item" v-model="insideValue[item.key]"></component>
                       </slot>
                   </mu-form-item>
               </mu-col>
           </mu-row>
       </mu-form>
    </div>
</template>

<script>
    import formItems from "@/comps/form/formItems";
    export default {
        name: "EzData",
        components:{...formItems},
        props:{
            value:{},
            config:{},
        },
        data(){
            return{
                insideValue:{},
                items:[],
                form:{
                    labelPosition:"top",
                    labelWidth:100,
                },

            }
        },
        mounted() {
            this.form = this.config.form
            this.items = this.config.items
            if (!this.$utils.isObject(this.value)){
                this.insideValue = {}
            }else {
                this.insideValue = this.value
            }
        },
        methods:{
            valid(){
                return this.$refs.form.validate()
            }
        },

        watch:{

            value:{
                deep:true,
                handler(v){
                    if (JSON.stringify(this.insideValue) === JSON.stringify(this.value))return
                    if (!this.$utils.isObject(v)){
                        this.insideValue = {}
                    }else {
                        this.insideValue = v
                    }
                    this.$nextTick(()=>{this.$forceUpdate()})
                }
            },

            insideValue:{
                deep:true,
                handler(v){
                    this.$refs.form.validate()
                    this.$emit('input',v)
                },

            },
            config:{
                deep:true,
                handler(v){
                }
            }
        },
    }
</script>

<style scoped>

</style>